import { feedbacks } from '@/services/ant-design-pro/evaluationDoc';
import { history } from '@umijs/max';
import { Button, message, Modal, Rate, Space } from 'antd';
import { parse } from 'querystring';
import React, { useEffect, useRef, useState } from 'react';
import Article from './com/article';
import Comment from './com/comment';
import './index.less';
const EvaluationDoc: React.FC = () => {
  // const { TextArea } = Input;
  const [documentUuid, setDocumentUuid] = useState<any>(null); //document_uuid

  const desc = ['非常差', '差', '一般', '不错', '超赞']; //评分文案
  const [score, setScore] = useState<number>(0); //评分
  const [isModalOpen, setIsModalOpen] = useState(false); //退出询问弹窗

  const [commentList, setCommentList] = useState([]); //赞和踩列表
  const highlighterRef = useRef(null); //高亮实例

  //退出询问弹窗 确定
  const handleOk = () => {
    setIsModalOpen(false);
    history.back();
  };
  //退出询问弹窗 取消
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const handleExit = () => {
    setIsModalOpen(true);
  };
  const handleSubmit = async () => {
    //校验是否评分
    if (score === 0) {
      message.open({
        type: 'warning',
        content: '请为文档评分',
      });
      return;
    }
    //处理评价列表数据
    const items = commentList.map((item: any) => {
      return {
        reason: item.idea,
        target_content: item.content,
        type: item.type,
      };
    });

    const res = await feedbacks({
      document_uuid: documentUuid,
      star: score,
      items,
    });
    if (res.code === 0) {
      message.open({
        type: 'success',
        content: '感谢你的评价，AI会变得更懂你',
      });
      setTimeout(() => {
        //返回上一级
        history.back();
      }, 1000);
    }
  };

  useEffect(() => {
    const { documentUuid }: any = parse(location.search.replace('?', ''));
    if (documentUuid) {
      setDocumentUuid(documentUuid);
    }
  }, []);

  return (
    <div className="evaluationDoc-wrap">
      {/* 左侧文章 */}
      <Article
        highlighterRef={highlighterRef}
        commentList={commentList}
        setCommentList={setCommentList}
        documentUuid={documentUuid}
      ></Article>
      {/* 右侧评论 */}
      <Comment
        highlighterRef={highlighterRef}
        commentList={commentList}
        setCommentList={setCommentList}
      ></Comment>
      <div className="evaluationDoc-bottom">
        <div className="score-wrap">
          <div className="score-box">
            <span className="score-hd">全文评价：</span>
            <div className="score-bd">
              <Rate value={score} onChange={setScore} />
            </div>
            <span className="score-ft">{desc[score - 1]}</span>
          </div>
          <div className="submit-box">
            <Space wrap>
              <Button onClick={() => handleExit()}>退出</Button>
              <Button type="primary" onClick={() => handleSubmit()}>
                提交
              </Button>
            </Space>
          </div>
        </div>
      </div>
      <Modal
        title="确认退出"
        centered
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width={360}
        footer={[
          <Button
            key="back"
            onClick={handleCancel}
            style={{ marginRight: '20px', marginTop: '5px' }}
          >
            取消
          </Button>,
          <Button key="submit" type="primary" danger onClick={handleOk}>
            确认
          </Button>,
        ]}
      >
        <p>退出评价后该评价内容将不会保存</p>
      </Modal>
    </div>
  );
};

export default EvaluationDoc;
